<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-11 11:53:19
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-10-13 11:50:17
 * @FilePath: \ekee-web\src\components\EnterpriseCenterTitle.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
div.enterprise-center-tabs
  div.content.flex.justify-start.w100.tc
    div.item(
      v-for="(item, index) in tabList" 
      :class="{'active': item == current}"
      @click="onTabChange(item)") 
      span.name {{ item }}
</template>

<script setup>
import { ref } from "vue";

defineProps({
  tabList: Array,
  current: String
});

const emits = defineEmits(["change"]);

const onTabChange = (item) => {
  emits("change", item);
}
</script>

<style lang="stylus" scoped>
.enterprise-center-tabs
  .content
    padding: 14px 0px 0px 0px;
    border-bottom: 1px solid #E6E6E6;
    font-weight: bold;
    font-size: 24px;
    color: #000000;
    .item
      // width: 88px;
      width: 136px;
      line-height: 60px;
    .active
      color: #2487E8;
      border-bottom: 2px solid #2487E8;
</style>
